전체 포스트

변수에 타입을 명시하는 방법 - 타입 어노테이션

타입 어노테이션에 대해 살펴봅니다
2/13/2023 작성
 

개요

안녕하세요 이정환입니다 😃

앞선 내용에서 우리는 Node.js 패키지를 생성한 다음 타입스크립트 관련 도구들을 설치하고 컴파일러 옵션을 직접 설정하며 살펴보았습니다.

이번에는 직접 타입스크립트 코드를 작성하며, 타입스크립트에서 변수에 타입을 명시하기 위해 가장 기본적으로 사용되는 타입 어노테이션(타입 주석)에 대해 살펴봅니다.

 

타입 어노테이션이란?

타입 어노테이션은 타입 주석 이라는 뜻으로 타입스크립트에서 변수의 타입을 지정하기 위해 사용합니다.

COPY
let a: number;
let b: string;
let c: boolean;

3개의 변수를 선언하고 각각 숫자형을 의미하는 number, 문자열을 의미하는 string, 참 또는 거짓을 저장하는 boolean 타입을 지정했습니다. 이렇듯 타입 어노테이션을 이용하면 변수를 선언함과 동시에 변수가 가져야 할 타입을 지정할 수 있습니다.

타입 어노테이션으로 변수의 타입을 지정하면 타입과 다른 값을 변수에 대입 하려 할 경우 오류가 발생합니다.

COPY
let a: number;
let b: string;
let c: boolean;

a = "hello"; // 오류 : string 형식은 number 형식에 할당할 수 없습니다.

오류 메세지를 보면 string 형식을 number 형식에 할당할 수 없다고 나옵니다. 여기서 형식은 타입을 말합니다. 따라서 “hello”는 string 타입이므로 number 타입인 변수 a에 할당할 수 없다는 뜻으로 이해할 수 있습니다.

타입스크립트는 이렇듯 변수에 저장 하려는 값의 타입과 변수가 갖는 타입을 비교해 할당 가능한지 코드를 실행하기 전에 검사합니다.

당연히 올바른 타입의 값을 대입하면 아무런 오류도 발생하지 않습니다.

COPY
let a: number;
let b: string;
let c: boolean;

a = 1;
b = "hello";
c = true;
 

타입 어노테이션이 필수는 아닙니다.

변수에 반드시 타입 어노테이션을 이용해 타입을 명시해야 하는 건 아닙니다.

앞서 살펴 보았듯이 타입스크립트는 작성된 코드를 보고 알아서 타입을 추론합니다. 함수의 매개 변수처럼 타입을 추론할 수 없는 상황에만 반드시 타입을 명시하도록 하는 점진적 타이핑 언어입니다.

다음 예 처럼 변수의 타입을 추론할 수 있는 경우 타입 어노테이션을 작성하지 않아도 괜찮습니다.

COPY
let a = 1;
let b = "hello";

타입스크립트는 위 코드를 보고 “변수 a는 number 타입, 변수 b는 string 타입을 갖겠구나” 하고 자동으로 타입을 추론합니다.

따라서 다음처럼 변수 a에 string 타입 값을 할당하려고 하면 오류가 발생합니다.

COPY
let a = 1;
let b = "hello";

a = "string"; // 오류 : string 형식은 number 형식에 할당할 수 없습니다.

이렇듯 타입스크립트는 대부분의 변수의 타입을 자동 추론하므로 귀찮게 굳이 일일히 모든 변수의 타입을 명시할 필요는 없습니다. 이런 점은 C나 Java에 비해 타입스크립트가 갖는 장점이기도 합니다.

 

타입 어노테이션이 필요한 상황

타입 어노테이션은 필수는 아니지만 꼭 필요한 몇 가지 상황이 존재합니다. 참고로 이번에는 금방 만나볼 수 있는 두 가지 상황만 살펴보겠습니다. 그 밖의 복잡한 상황은 이후에 더 자세히 살펴보겠습니다.

1. 함수의 매개변수

함수의 매개변수는 타입을 추론할 수 없으므로 반드시 타입 어노테이션을 사용해야 합니다.

COPY
function add(a, b) {
  // 오류 : a, b 매개변수에는 암시적으로 any 형식이 포함됩니다.
  return a + b;
}

add 함수의 매개변수 a와 b에는 어떤 값이든 제공될 수 있습니다. 그냥 함수를 호출하고 아무런 값이나 넣어도 되기 때문입니다. 이렇게 함수의 매개 변수에 어노테이션을 사용하지 않으면 타입 오류가 발생합니다.

따라서 매개변수에는 다음과 같이 타입 어노테이션을 사용해 타입을 명시해주어야 합니다.

COPY
function add(a: number, b: number) {
  return a + b;
}

매개변수의 타입 어노테이션 또한 일반 변수의 어노테이션과 동일합니다.

 

2. 초기화 하지 않는 선언

변수를 선언하면서 동시에 초기화 하지 않을 경우 타입 추론이 이루어지지 않습니다.

COPY
let a;
a = 1;
a = "hello";

let b = 1;
b = "hello"; // 오류 : string 형식은 number 형식에 할당할 수 없습니다.

변수 a는 선언만 하고 값을 초기화 하지는 않았습니다. 그리고 바로 다음 라인에 number 타입 값 1을 할당했습니다. 이럴 경우 변수 a가 number 타입으로 자동 추론될 것이라 기대할 수 있습니다.

그러나 타입스크립트는 초기화 되지 않은 변수 선언에 대해서는 타입을 추론하지 않습니다. 따라서 a에 string 타입 값 “hello”를 할당해도 오류가 발생하지 않습니다.

반면 b는 선언과 동시에 1로 초기화 했기 때문에 number 타입으로 추론되어 “hello”를 할당하려 할 경우 오류가 발생합니다.

이것은 a가 any라는 타입으로 추론되기 때문입니다. any 타입은 타입 검사를 포기하는 타입이라고 할 수 있는데 이에 대해서는 나중에 자세히 다룹니다.

물론 당연히 const로 변수를 선언할 때에는 해당되지 않는 이야기입니다. const는 변수 선언과 동시에 반드시 초기화 해야 하기 때문입니다.

 

이 밖에도 반드시 타입 어노테이션을 사용해 변수에 타입을 명시해야 하는 상황이 몇개 더 존재합니다. 다만 지금 시점에 알 필요는 없으니 이후에 더 자세히 살펴보겠습니다.